import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';

const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
        borderWidth:1,
        borderTopColor: 'red',
        borderLeftColor: 'blue',
        borderRightColor: 'green',
        borderBottomColor:'orange',
        borderTopLeftRadius:20,
        borderTopRightRadius:20,
        borderBottomLeftRadius:20,
        borderBottomRightRadius:20,
        padding:20,
        margin:20
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5
    }
});

class Welcome extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}> Welcome to React Native! </Text>
                <Text style={styles.instructions}> To get started, edit index.ios.js </Text>
                <Text style={styles.instructions}> Press Cmd+R to reload,{'\n'}Cmd+D or shake for dev menu </Text>
            </View>
        );
    }
}

export default Welcome;